<template>
  <div class="body">
    <header-t></header-t>
    <div class="container">
      <div class="one">
        <div class="li-left">
          <li
            v-for="(item, index) in liTexts"
            :key="index"
            @mouseenter="item.bool = !item.bool"
            @mouseleave="item.bool = !item.bool"
          >
            {{ item.type }}
            <div class="li-goods" v-show="item.bool">
              <li v-for="(good, index) in item.goods" :key="index">
                {{ good }}
              </li>
            </div>
          </li>
        </div>
        <div class="roll-right">
          <div class="roll">
            <img :src="ImgSrc" />
          </div>
        </div>
      </div>
      <div class="two">
        <h2>推荐</h2>
        <div class="recommend-tab">
          <good-li :goods="goods"></good-li>
        </div>
      </div>
    </div>
    <footer-t></footer-t>
  </div>
</template>

<script>
import FooterT from "./FooterT.vue";
import GoodLi from "./GoodLi.vue";
import HeaderT from "./HeaderT.vue";
export default {
  data() {
    return {
      ImgSrc: "",
      liShow: false,
      liTexts: [
        {
          type: "手机",
          goods: ["Mate系列", "P系列", "Nova系列", "畅想系列", "华为智慧手机"],
          bool: false,
        },
        {
          type: "电脑",
          goods: [
            "MateBook X系列",
            "MateBoo系列",
            "MateBook D系列",
            "MateBook E系列",
            "商用电脑",
            "显示器",
            "台式机",
          ],
          bool: false,
        },
        {
          type: "平板",
          goods: [
            "MateBook E系列",
            "MateBook Pro系列",
            "MatePaid系列",
            "墨水平板",
            "畅想系列",
            "商用平板",
            "配件",
          ],
          bool: false,
        },
        {
          type: "智慧屏",
          goods: [
            "智慧屏SE系列",
            "智慧屏V系列",
            "智慧屏S系列",
            "智慧屏X系列",
            "学习智慧屏",
            "商用智慧屏",
          ],
          bool: false,
        },
        {
          type: "穿戴",
          goods: [
            "智慧科技",
            "经典全能",
            "专业极致",
            "时尚潮流",
            "健康守护",
            "配件",
          ],
          bool: false,
        },
        {
          type: "耳机音响",
          goods: [
            "真无线耳机",
            "有线耳机",
            "智能眼镜",
            "蓝牙音箱",
            "智能音响",
            "便携音响",
            "头戴耳机",
          ],
          bool: false,
        },
      ],
      goods: [
        {
          img: require("/src/assets/1.png"),
          text: "HUAWEI nova 9 SE",
          price: "￥2399",
        },
        {
          img: require("/src/assets/2.png"),
          text: "HUAWEI P50E",
          price: "￥4488",
        },
        {
          img: require("/src/assets/3.png"),
          text: "MatePad 10.4",
          price: "￥1899",
        },
        {
          img: require("/src/assets/4.png"),
          text: "HUAWEI P50 Pro",
          price: "￥5488",
        },
        {
          img: require("/src/assets/5.png"),
          text: "HUAWEI P50",
          price: "￥4988",
        },
        {
          img: require("/src/assets/6.png"),
          text: "HUAWEI FreeBuds 4E",
          price: "￥679",
        },
      ],
      rollImg: [
        require("/src/assets/roll-1.jpg"),
        require("/src/assets/roll-2.jpg"),
        require("/src/assets/roll-3.jpg"),
      ],
    };
  },
  methods: {
    Time() {
      let index = 0;
      let a = this; //eslint-disable-line no-unused-vars
      return setInterval(function () {
        index = ++index % 3;
        a.ImgSrc = a.rollImg[index];
      }, 1500);
    },
  },
  components: {
    GoodLi,
    HeaderT,
    FooterT,
  },
  mounted() {
    this.Time();
  },
  unmounted() {
    clearInterval(this.Time);
  },
};
</script>

<style>
.body {
  background-color: rgb(252, 252, 252);
}
.container {
  margin-bottom: 300px;
}
.one {
  width: 100%;
  height: 500px;
  position: relative;
  top: -60px;
}
.li-left {
  width: 200px;
  height: 500px;
  position: absolute;
  left: 100px;
  top: 5px;
  background-color: rgb(252, 252, 252);
  border-radius: 15px;
}
.li-left:hover {
  box-shadow: 0px 0px 15px rgb(172, 133, 133);
}
.li-left li {
  list-style: none;
  display: block;
  width: 200px;
  height: 50px;
  text-align: left;
  padding-left: 10px;
  line-height: 50px;
}
.li-goods,
.li-left li:hover {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 15px rgb(172, 133, 133);
}
.li-goods {
  width: 500px;
  height: 300px;
  text-align: left;
  background-color: rgb(255, 255, 255);
  position: absolute;
  left: 210px;
  top: 0px;
  border-radius: 15px;
}
.li-goods li {
  list-style: none;
  display: inline-block;
  width: 200px;
  height: 40px;
  margin: 10px;
  border-radius: 10px;
}
.li-goods li:hover {
  background-color: rgb(255, 240, 240);
}
.roll-right {
  width: 1880px;
  height: 510px;
}
.roll {
  margin-top: 70px;
}
.roll img {
  width: 1880px;
}
.two h2 {
  text-align: left;
  padding-left: 20px;
  color: black;
  font-weight: bold;
  /* border: 1px black solid; */
  line-height: 50px;
}
.recommend-tab {
  width: 90%;
  height: 330px;
  margin: 10px auto;
}
</style>